import './index.css'
import {Button, Input, message, Modal, Popconfirm, Table} from "antd"
import {useCallback, useEffect, useState} from "react"
import {DatabaseOutlined, SearchOutlined} from "@ant-design/icons"
import {deleteOrder, getAllOrder} from "../../../request/order"
import OrderDetail from "../../purchase/order-detail"
import "../../purchase/index.css"

const columns = [
    {
        title: '订单号',
        dataIndex: 'id',
        key: 'id',
        align: 'center',
        width: 200
    },
    {
        title: '提交时间',
        dataIndex: 'created_at',
        key: 'created_at',
        align: 'center',
        width: 200
    },
    {
        title: '用户账号',
        dataIndex: 'uid',
        key: 'uid',
        align: 'center',
        width: 200
    },
    {
        title: '订单金额',
        dataIndex: 'actual_price',
        key: 'actual_price',
        align: 'center',
        width: 200
    },
    {
        title: '支付方式',
        dataIndex: 'pay_way',
        key: 'pay_way',
        align: 'center',
        width: 200
    },
    {
        title: '订单状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        width: 200
    },
    {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        align: 'center'
    }
]

function Order() {
    const [data, setData] = useState([])
    const [orderId, setOrderId] = useState('')
    const [uid, setUid] = useState('')
    const [payWay, setPayWay] = useState('')
    const [shownOrderId, setShownOrderId] = useState(null)

    const loadOrders = useCallback(({orderId, uid, payWay} = {}) => {
        function doDeleteOrder(order) {
            deleteOrder(order.id).then(() => {
                message.success('删除成功')
                loadOrders({orderId, uid, payWay})
            }).catch(({ msg }) => message.error(msg))
        }
        function loadOrdersInner(data) {
            return data.map(order => {
                order.key = order.id
                order.operation = (
                    <div className="operations">
                        <Button onClick={() => setShownOrderId(order.id)}>查看订单</Button>
                        <Popconfirm
                            title="确认删除"
                            description="你确定要删除该订单吗?"
                            onConfirm={() => {
                                doDeleteOrder(order)
                            }}
                            okText="是"
                            cancelText="否"
                        >
                            <Button type="primary" danger>删除订单</Button>
                        </Popconfirm>
                    </div>
                )
                return order
            })
        }
        const showMsg = orderId || uid || payWay
        getAllOrder(orderId, uid, payWay).then(orders => {
            setData(loadOrdersInner(orders))
            if (showMsg) message.success(`查询到${orders.length}个订单`)
        })
    }, [])
    useEffect(loadOrders, [loadOrders])

    return (
        <>
            <div className="content-item-box">
                <div className="search">
                    <div className="label"><SearchOutlined/>筛选搜索</div>
                    <div className="conditions">
                        <label>
                            <span>订单编号</span>
                            <Input placeholder="请输入订单编号" value={orderId}
                                   onChange={e => setOrderId(e.target.value)}></Input>
                        </label>
                        <label>
                            <span>用户账号</span>
                            <Input placeholder="请输入用户账号" value={uid}
                                   onChange={e => setUid(e.target.value)}></Input>
                        </label>
                        <label>
                            <span>支付方式</span>
                            <Input placeholder="请输入支付方式" value={payWay}
                                   onChange={e => setPayWay(e.target.value)}></Input>
                        </label>
                    </div>
                </div>
                <div className="blank"></div>
                <Button onClick={() => {
                    setOrderId('')
                    setUid('')
                    setPayWay('')
                    loadOrders()
                }}>重置</Button>
                <Button type="primary" onClick={() => {
                    loadOrders({orderId, uid, payWay})
                }}>搜索</Button>
            </div>
            <div className="content-item-box">
                <DatabaseOutlined/>
                <span>数据列表</span>
            </div>
            <Table
                columns={columns}
                dataSource={data}
                pagination={false}
            />
            <Modal
                title="订单详情"
                open={shownOrderId !== null}
                onCancel={() => setShownOrderId(null)}
                footer={[]}
                width={600}
            >
                <div className="purchase-content">
                    <OrderDetail orderId={shownOrderId}/>
                </div>
            </Modal>
        </>
    )
}

export default Order